<template>
  <div class="x-state-box" :class="{warn: data.state === 2, offline: data.state===3}">
    <div class="header-box">
      <div class="title" :class="{'red-color': data.state === 2}"><span>2栋配电房</span></div>
      <div class="header-msg-box">
        <div class="part">
          <i class="fa fa-thermometer-three-quarters icon"></i>
          <span>21.7℃</span>
        </div>
        <div class="part">
          <i class="fa fa-tint icon"></i>
          <span>81.9%</span>
        </div>
      </div>
    </div>
    <div class="content-box">
      <div class="content">
        <div class="icon-box">
          <div class="name" :class="{'red-color': data.state === 2}"><span>进线柜</span></div>
          <div class="icon"></div>
          <div class="state" :class="{'red-color': data.state === 2, 'gray-color': data.state === 3}">
            <span v-show="data.state === 1">运行</span>
            <span v-show="data.state === 2">异常</span>
            <span v-show="data.state === 3">离线</span>
          </div>
        </div>
        <div class="msg-box">
          <div class="part part1">
            <div class="msg">
              <span class="mr20">A:</span>
              <span>226.87</span> <span class="unit mr20">V</span>
              <span>3.33</span> <span class="unit">A</span>
            </div>
            <div class="msg">
              <span class="mr20">B:</span>
              <span>226.87</span> <span class="unit mr20">V</span>
              <span>3.33</span> <span class="unit">A</span>
            </div>
            <div class="msg">
              <span class="mr20">C:</span>
              <span>226.87</span> <span class="unit mr20">V</span>
              <span>3.33</span> <span class="unit">A</span>
            </div>
          </div>
          <div class="part part2">
            <div class="msg"><span class="mr10">总有功因素:</span><span>0.95</span></div>
            <div class="msg"><span class="mr10">总有功功率:</span><span>405.02</span> <span class="unit">KW</span></div>
          </div>
          <div class="part part3">
            <div class="x-chart-box">
              <broken-line :width="colWidth" height="60px" :series-data="chartData"></broken-line>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'State',

  props: {
    data: {
      default: null
    }
  },

  data () {
    return {
      colWidth: '160px'
    }
  },

  computed: {
    chartData () {
      var result = this.data.chartData || [
        {
          value: 123,
          date: '1'
        },
        {
          value: 1204,
          date: '2'
        },
        {
          value: 124,
          date: '3'
        },
        {
          value: 3204,
          date: '4'
        },
        {
          value: 5124,
          date: '5'
        },
        {
          value: 1204,
          date: '6'
        },
        {
          value: 8124,
          date: '7'
        }
      ]
      return result
    }
  },

  mounted () {
    // setTimeout(() => {
    //   this.colWidth = `${(this.$el.clientWidth / 2)}px`
    // }, 0)
  }
}
</script>

<style lang="stylus" scoped>
  .x-state-box
    width: 100%;
    height: 100%;
    background: #1e1e1e;
    padding 10px
    box-sizing border-box

    .header-box
      color: #ccc;
      height: 80px;
      line-height: 30px;
      font-size: 13px;
      border-bottom 1px solid #444
      box-sizing border-box

      .title
        font-size 14px

      .part
        display inline-block
        margin-left 10px
        margin-right 20px
        height 50px
        line-height 50px
        font-size 16px
        color #999

        .icon
          margin-right 5px
          font-size 18px


    .content-box
      position relative
      width 100%
      .content
        position absolute
        left 50%
        transform translate(-50%,0)
        padding-left 120px
        box-sizing border-box
        height 210px
        width 280px


      .icon-box
        position absolute
        left 0
        height 100%
        width 120px
        padding-left 0px
        padding-top 20px
        padding-right 20px
        box-sizing border-box

        .name
          text-align left
          font-size 14px
          padding-left 10px
          box-sizing border-box

        .icon
          width 100%
          height 110px
          background no-repeat url('../../../../assets/images/u59.png') right top / 110% auto

        .state
          text-align center
          font-size 14px
          font-weight 100
      .msg-box
        height 100%
        padding-top 10px
        box-sizing border-box
        .part
          padding-top 10px
          .msg
            line-height 22px
        .unit
          color #999
    &.warn
      border 1px solid red
      .icon-box .icon
        background-image url('../../../../assets/images/u237.png')
    &.offline
      .icon-box .icon
        background-image url('../../../../assets/images/u392.png')
  .red-color
    color red
  .gray-color
    color #999
</style>
